<template>
    <el-container>
        <el-header class="header">
            <div class="header-left"><el-input v-model="roomNum" placeholder="请输入房间编号开头" class="btn-search"></el-input><el-button @click="searchByRoomNum()">查询</el-button></div>
            <div class="header-right"><h3>注意: 与清洁工确认后, 修改对应的房间打扫状态</h3></div>
        </el-header>
        <el-footer>
            <el-table :data="pageInfo.list" style="width: 100%">
                <el-table-column prop="id" v-if="false"></el-table-column>
                <el-table-column type="index" label="序号"></el-table-column>
                <el-table-column prop="roomNum" label="房间编号" min-width="100"></el-table-column>
                <el-table-column prop="floor" label="所在楼层" :filters="floorFilter" :filter-method="floorFilterHandler" min-width="50"></el-table-column>
                <el-table-column prop="buildingCode" label="所在楼栋" min-width="100" :filters="buildingCodeFilter" :filter-method="buildingCodeFilterHandler"></el-table-column>
                <el-table-column label="入住状态" min-width="100">
                    <template #default="scope">
                        <el-switch disabled :value="scope.row.liveStatus" inactive-text="未入住" active-text="入住中"  :inactive-value=0 :active-value=1></el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="打扫状态" min-width="100">
                    <template #default="scope">
                        <el-switch :value="scope.row.cleanStatus" active-color="#13ce66" inactive-text="未打扫" active-text="已打扫" :active-value=1 :inactive-value=0 @click="changeClean(scope.row)"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column prop="roomTypeName" label="房型" min-width="100"  :filters="roomTypeFilter" :filter-method="roomTypeFilterHandler"></el-table-column>
            </el-table>
            <el-pagination
                    layout="prev, pager, next"
                    :total="pageInfo.total" :current-page="pageInfo.pageNum"  @current-change="changePage">

            </el-pagination>
        </el-footer>
    </el-container>

</template>

<script>
    import { ElMessage } from 'element-plus'

    export default {
        data() {
            return {
                roomNum: '',
                pageInfo: {},
                roomTypeFilter: [],
                buildingCodeFilter: [],
                floorFilter: [{text: '1-10', value: 1}, {text: '11-20', value: 11}, {text: '21-30', value: 21}, {text: '31-40', value: 31}, {text: '41-50', value: 41},
                    {text: '51-60', value: 51}, {text: '61-70', value: 61}, {text: '71-80', value: 71}, {text: '81-90', value: 81}, {text: '91-100', value: 91}
                ]
            }
        },
        methods: {
            roomTypeFilterHandler(value, row, column) {
                return row.roomTypeId == value;
            },
            buildingCodeFilterHandler(value, row, column) {
                return row.buildingCode == value;
            },
            floorFilterHandler(value, row, column) {
                return row.floor >= value && row.floor < value + 10;
            },
            changePage(page) {
                this.axios.get('room/info/page/' + page)
                    .then(resp => {
                        if (!resp.data.flag) {
                            ElMessage.error(resp.data.msg)
                            return;
                        }
                        this.pageInfo = resp.data.data.info;
                    });
            },
            searchByRoomNum() {
                this.axios.get('room/info/page/1', {
                        params: {
                            roomNum: this.roomNum
                        }
                    })
                    .then(resp => {
                        if (!resp.data.flag) {
                            ElMessage.error(resp.data.msg)
                            return;
                        }
                        this.pageInfo = resp.data.data.info;
                    });
            },
            changeClean(row) {
                let data = {
                    id: row.id,
                    cleanStatus: row.cleanStatus == 0 ? 1 : 0
                };
                this.axios.put('room/cleanStatus', data)
                    .then(resp => {
                        if (!resp.data.flag) {
                            ElMessage.error(resp.data.msg)
                            return;
                        }
                        this.axios.get('room/info/page/' + this.pageInfo.pageNum)
                        .then(resp => {
                            if (!resp.data.flag) {
                                ElMessage.error(resp.data.msg)
                                return;
                            }
                            this.pageInfo = resp.data.data.info;
                        });
                    });
            }
        },
        created() {
            this.axios.get('room/info/page/1')
            .then(resp => {
                if (!resp.data.flag) {
                    ElMessage.error(resp.data.msg)
                    return;
                }
                this.pageInfo = resp.data.data.info;
            });
            this.axios.get('room/findRoomFilter')
            .then(resp => {
                if (!resp.data.flag) {
                    ElMessage.error(resp.data.msg)
                    return;
                }
                this.roomTypeFilter = resp.data.data.roomTypeFilter;
                this.buildingCodeFilter = resp.data.data.buildingCodeFilter;
            });
        }
    }
</script>

<style scoped>
    .header-left {
        float: left;
    }
    .header-right {
        float: right;
    }
    .btn-search {
        display: inline-block;
        width: 200px;
    }
</style>